<template>
    <div class="login-main">
        <i class="iconfont icon-close" @click="fnClose"></i>
        <div class="login-body">
            <div v-if="haserweima" class="tabs">
                <a
                    :class="{ 'tab-btn': true, 'btn-active': logtype == 0 }"
                    href="javascript:void(0);"
                    @click="changeTab(0)"
                    >密码登录</a
                >
                <a
                    :class="{ 'tab-btn': true, 'btn-active': logtype == 1 }"
                    href="javascript:void(0);"
                    @click="changeTab(1)"
                    >验证码登录</a
                >
                <div
                    class="tab-bar"
                    :class="{ 'tab-bar-sec': logtype == 1 }"
                ></div>
            </div>

            <!-- 账号密码登录模块 -->
            <div v-show="logtype == 0" class="tab-panel">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                    <el-form-item prop="phone" class="login-input">
                        <el-input
                            v-model.trim="ruleForm.phone"
                            type="phone"
                            auto-complete="off"
                            class="el-input-login"
                            placeholder="手机号或邮箱"
                        />
                    </el-form-item>
                    <el-form-item
                        prop="password"
                        class="login-input"
                        @keyup.enter.native="login"
                    >
                        <el-input
                            v-model="ruleForm.password"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                            class="el-input-login"
                        />
                    </el-form-item>
                </el-form>
                <div class="login-banner">
                    <el-checkbox v-model="autoLogin" class="auto-login">
                        保持登录状态
                    </el-checkbox>
                </div>
                <a
                    class="login-btn"
                    href="javascript:void(0);"
                    :style="{ marginTop: '114px' }"
                    @click="login"
                    >登录</a
                >
            </div>

            <!-- 验证码登录 -->
            <div v-show="logtype == 1" class="tab-panel">
                <el-form
                    ref="ruleFormCode"
                    :model="ruleFormCode"
                    :rules="rulesCode"
                >
                    <el-form-item prop="phone" class="login-input">
                        <el-input
                            v-model.trim="ruleFormCode.phone"
                            type="phone"
                            auto-complete="off"
                            class="el-input-login"
                            placeholder="手机号"
                        />
                    </el-form-item>
                    <el-form-item
                        prop="captcha"
                        class="login-input"
                        @keyup.enter.native="login"
                    >
                        <div class="reg-verify-code-line">
                            <el-input
                                v-model="ruleFormCode.captcha"
                                auto-complete="off"
                                placeholder="验证码"
                                class="el-input-login el-input-code"
                            />
                            <div
                                class="login-caotch"
                                :style="{
                                    background: `url(${captchaImg}) center center no-repeat`,
                                    backgroundSize: 'cover'
                                }"
                                @click="getCaptcha()"
                            ></div>
                        </div>
                    </el-form-item>
                    <el-form-item
                        prop="code"
                        class="login-input"
                        @keyup.enter.native="login"
                    >
                        <div class="reg-verify-code-line">
                            <el-input
                                v-model="ruleFormCode.code"
                                auto-complete="off"
                                placeholder="验证码"
                                class="el-input-login el-input-code"
                            />
                            <a
                                class="code-btn"
                                :class="{ 'code-btn-disabled': codeDisabled }"
                                href="javascript:void(0);"
                                @click="getVerifyCode()"
                                >{{ verifyCodeStr }}</a
                            >
                        </div>
                    </el-form-item>
                </el-form>
                <div class="login-banner">
                    <el-checkbox v-model="autoLogin" class="auto-login">
                        保持登录状态
                    </el-checkbox>
                </div>
                <a
                    class="login-btn"
                    href="javascript:void(0);"
                    @click="loginByPhone"
                    >登录</a
                >
            </div>
        </div>
        <div class="no-account">
            <p class="reg-link" @click="loginToReg">
                注册校园事业部>>
            </p>
            <p class="custom-link" @click="customSystem">
                进入商家客服系统
            </p>
        </div>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'

export default {
    props: {
        errorLogin: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            type: 'login', // login:登录,reg: 注册
            autoLogin: true,
            logtype: 0, // 登录类型:微信/账号,
            haserweima: true, // 是否有二维码登录
            login_code: '',
            codeDisabled: false, // 短信验证码是否可以发送
            verifyCodeTimer: '', // 短信验证码倒计时计时器
            verifyCodeStr: '获取验证码',
            wxloginData: {
                login_code: '',
                qr_code: '',
                exprie: 600
            },
            wxInterval: '',
            wxTimeout: '',
            pwdFocus: false,
            loading: true,
            qr_handwmt_login_code: '',
            hireForgetPanel: false,
            ruleForm: {
                phone: '',
                passwprd: ''
            },
            captchaImg: '',
            rules: {
                phone: [
                    {
                        required: true,
                        message: '请输入手机号或邮箱',
                        trigger: 'blur'
                    }
                    // { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '请输入6-18位密码',
                        trigger: 'blur'
                    }
                ]
            },
            ruleFormCode: {
                phone: '',
                code: '',
                captcha: ''
            },
            rulesCode: {
                phone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    { validator: this.checkPhone, trigger: 'blur' }
                    // { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    },
                    {
                        min: 4,
                        max: 4,
                        message: '请输入正确的验证码',
                        trigger: 'blur'
                    }
                ],
                captcha: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    },
                    {
                        min: 5,
                        max: 5,
                        message: '请输入正确的验证码',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    computed: {
        ...mapGetters({
            isVip: 'userInfo/isVip'
        }),
        ...mapState({
            userInfo: (state) => state.userInfo.userInfo,
            sales: (state) => state.userInfo.sales
        })
    },
    watch: {},
    created() {
        if (!process.server) {
            this.getCaptcha()
            this.$post('/User/checkLogin', {}).then((resp) => {
                if (resp.code == 1) {
                    if (resp.data.is_login == 1) {
                        this.$emit('success')
                    }
                }
            })
        }
    },
    beforeDestroy() {},
    methods: {
        getCaptcha() {
            this.$post('/User/sendVerifyGetCaptcha', {
                type: 1
            }).then((resp) => {
                if (resp.code == 1) {
                    this.captchaImg = resp.data.captcha_img
                } else {
                    this.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: resp.msg
                    })
                }
            })
        },
        checkPhone(rule, value, callback) {
            const reg = /^1[3456789]\d{9}$/
            if (reg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的手机号'))
            }
        },
        fnClose() {
            this.$emit('close')
        },
        changeTab(index) {
            const that = this

            this.logtype = index
            if (index == 1) {
                setTimeout(function() {
                    that.isPhoneFocus = true
                }, 0)
            }
        },
        loginToReg() {
            this.$emit('changePage', 'reg')
        },
        showForget() {
            this.$emit('changePage', 'forget')
        },
        getVerifyCode() {
            this.checkPhone('code', this.ruleFormCode.phone, (error) => {
                if (!error) {
                    if (this.codeDisabled) {
                        return
                    }
                    const that = this
                    let verifyCodeTimer = null

                    // eslint-disable-next-line no-inner-declarations
                    function fnTimer(num) {
                        let number = num

                        if (verifyCodeTimer != null) {
                            clearInterval(verifyCodeTimer)
                        }
                        that.verifyCodeStr = number + 's'
                        verifyCodeTimer = setInterval(function() {
                            number--
                            if (!number) {
                                that.codeDisabled = false
                                clearInterval(verifyCodeTimer)
                                that.verifyCodeStr = '获取验证码'
                            } else {
                                that.verifyCodeStr = number + 's'
                            }
                        }, 1000)
                    }

                    this.$post('/User/sendVerify', {
                        type: 1,
                        mobile: that.ruleFormCode.phone,
                        captcha: that.ruleFormCode.captcha
                    }).then(function(resp) {
                        that.codeDisabled = true
                        if (resp.code == 1) {
                            fnTimer(60)
                            that.$notify.success({
                                title: '成功',
                                duration: 2000,
                                message: '请查收验证码'
                            })
                        } else if (resp.code == 0) {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                            that.codeDisabled = false
                        }
                    })
                }
            })
        },
        /**
         * 登录
         */
        login() {
            const that = this

            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$post('/User/loginByPassword', {
                        username: that.ruleForm.phone,
                        password: that.ruleForm.password,
                        is_remember: that.autoLogin ? 1 : 0,
                        ...this.sales
                    }).then(function(resp) {
                        if (resp.code == 1) {
                            setTimeout(() => {
                                that.$emit('success')
                            }, 300)
                        } else {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        loginByPhone() {
            const that = this

            this.$refs.ruleFormCode.validate((valid) => {
                if (valid) {
                    this.$post('/User/phoneLogin', {
                        phone: that.ruleFormCode.phone,
                        phone_verify_code: that.ruleFormCode.code,
                        is_remember: that.autoLogin ? 1 : 0,
                        ...this.sales
                    }).then(function(resp) {
                        if (resp.code == 1) {
                            that.getUserInfo()
                            that.getComponeyInfo()
                            setTimeout(() => {
                                // if (that.isVip) {
                                //     that.loginVip()
                                // } else {
                                //     that.$emit('success')
                                // }
                                that.$emit('success')
                            }, 300)
                        } else {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        getQrcode() {
            if (this.wxInterval) {
            }
            const that = this

            this.loading = true
            this.$post('/User/loginQrcode', {}).then(function(resp) {
                if (resp.code == 1) {
                    that.wxloginData = resp.data
                    that.login_code = resp.data.login_code
                    // that.checkQrcode();
                    that.wxInterval = setInterval(function() {
                        that.checkQrcode()
                    }, 3000)
                } else {
                    that.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: '获取二维码失败,请刷新重试'
                    })
                }
                that.loading = false
            })
        },
        getUserInfo() {
            this.$post('/UserCenter/getUserInfo', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit('userInfo/SET_USER_INFO', resp.data)
                }
            })
        },
        /**
         * 获取公司信息
         */
        getComponeyInfo() {
            this.$post('/UserCenter/getUserCompanyInfo', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit(
                        'companyInfo/SET_COMPANY_INFO',
                        resp.data
                    )
                } else {
                    console.log(resp.msg)
                }
            })
        },
        customSystem() {
            if (location.host.includes('www.zsdx.cn')) {
                window.open('http://css.zsdx.cn/login')
            } else {
                window.open('http://css-dev.wxhand.com/login')
            }
            // this.$post('/CustomerService/getLoginSessionTicket', {}).then(
            //     (resp) => {
            //         if (resp.code == 1) {
            //             //
            //         } else {
            //             console.log(resp.msg)
            //         }
            //     }
            // )
        }
    }
}
</script>

<style lang="less" scoped>
.login-main {
    position: realtive;
    width: 450px;
    height: 480px;
    background-color: #fff;
    .login-body {
        width: 334px;
        position: absolute;
        right: 58px;
        left: 58px;
        top: 0px;
        bottom: 0px;
        text-align: center;
        .tab-btn {
            display: inline-block;
            font-size: 20px;
            line-height: 1;
            color: #88909c;
            text-align: center;
            line-height: 20px;
            margin: 0 12px;
            &.btn-active {
                background-color: #fff;
                color: #1d2023;
            }
        }
        .tabs {
            margin-top: 23px;
            height: 26px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            position: relative;
            a {
                text-decoration: none;
            }
            .tab-bar {
                width: 30px;
                height: 2px;
                background: rgba(32, 160, 255, 1);
                border-radius: 3px;
                position: absolute;
                left: 40px;
                top: 24px;
                transition: left ease-in-out 0.3s;
            }
            .tab-bar-sec {
                left: 158px;
            }
        }
        .tab-panel {
            position: relative;
            padding: 0;
            margin-top: 26px;
            .login-code {
                margin-top: 20px;
                border: 1px solid #ccc;
                margin-left: 50%;
                transform: translateX(-50%);
                width: 240px;
                height: 240px;
                img {
                    width: 100%;
                    height: 100%;
                }
                a {
                }
            }
            .wei-tip {
                color: #fff;
                text-align: center;
                font-size: 13px;
                margin-top: 20px;
            }
            .login-user {
                margin-bottom: 20px;
            }
            .reg-verify-code-line {
                width: 334px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .login-caotch {
                width: 112px;
                height: 50px;
                cursor: pointer;
            }
            .login-banner {
                position: relative;
                margin: auto;
                height: 20px;
                .auto-login {
                    position: absolute;
                    left: 0;
                    color: #3f454b;
                }
                .forget-link {
                    position: absolute;
                    right: 0;
                    color: #fff;
                }
            }
            .code-btn {
                width: 112px;
                display: inline-block;
                border: 0;
                color: #1f2d3d;
                line-height: 50px;
                font-size: 14px;
                text-decoration: none;
                height: 50px;
                color: #fff;
                background: rgba(32, 160, 255, 1);
                border-radius: 4px;
                font-size: 18px;
                font-weight: 500;
                &.code-btn-disabled {
                    background: rgba(32, 160, 255, 0.3);
                    cursor: default;
                }
            }
            .login-btn {
                display: block;
                border: 0;
                color: #1f2d3d;
                line-height: 50px;
                margin-top: 40px;
                font-size: 14px;
                text-decoration: none;
                height: 50px;
                color: #fff;
                background: rgba(32, 160, 255, 1);
                border-radius: 4px;
                font-size: 18px;
                font-weight: 500;
            }
        }
    }

    .no-account {
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        bottom: 0px;
        font-size: 16px;
        width: 450px;
        height: 57px;
        box-sizing: border-box;
        border-top: 1px#E2E2E2 solid;
        display: flex;
        align-items: center;
        .reg-link {
            width: 225px;
            height: 57px;
            box-sizing: border-box;
            border-right: 1px#E2E2E2 solid;
            color: #f87739;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .custom-link {
            width: 225px;
            height: 57px;
            box-sizing: border-box;
            color: #666666;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.icon-close {
    width: 26px;
    height: 26px;
    font-size: 26px;
    color: #ccc;
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}
</style>
<style lang="less">
.login-sub label.cb > input:focus ~ .icon {
    background-color: #fff;
    margin-right: 3px;
}
/*checkbox样式重写*/

.login-container {
    font-size: 13px !important;
    .login-banner {
        label.cb > input ~ .icon {
            width: 15px;
            height: 15px;
            line-height: 15px;
            margin: 0;
            margin-top: -2px;
        }
        label.cb > input ~ .icon {
            background-color: #fff;
        }
        label.cb.active.cb-primary
            > input:not(:disabled):not([readonly])
            ~ .icon {
            background-color: #fff;
        }
        label.cb > input:checked ~ .icon {
            background-image: url(//cdn.zsdx.cn/wei/old/images/checkbox/checked.png);
            background-position: 50%;
            background-size: cover;
        }
    }
}
/* 登录相关页面所需input样式 全局 */

.login-input {
    margin: auto;
    margin-bottom: 40px;
    input,
    input:focus {
        line-height: 50px;
        font-size: 14px;
        color: #3f454b;
        width: 335px;
        padding-right: 18px;
        padding-left: 5px;
        height: 52px;
    }
    .el-input-login {
        input::-webkit-input-placeholder {
            color: #88909c !important;
            opacity: 0.8;
        }
        input::-moz-placeholder {
            color: #88909c !important;
            opacity: 0.8;
        }
        input:-moz-placeholder {
            color: #88909c !important;
            opacity: 0.8;
        }
    }
    .el-input-code {
        width: 198px;
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type='number'] {
            -moz-appearance: textfield;
        }
        input,
        input:focus {
            width: 198px;
        }
    }
}
</style>
